<template>
<!--  <el-container>-->
<!--    <el-main>-->
    <!-- 根据级别状态筛选数据 -->
      <el-form style="margin-bottom: 20px; display: flex; align-items: center;">
        <el-select v-model="filters.careLevelStatus" placeholder="级别状态" class="careLevel-select" @change="handleStatusChange">
          <el-option label="启用" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
        <el-button type="primary" style="margin-left: 16px" @click="addCareLevel">添加</el-button>
        <!-- 小贴士图标 -->
        <!-- 小贴士图标及文字 -->
        <div style="display: flex; flex-direction: column; align-items: center; margin-left: 16px; cursor: pointer;">
          <img src="../assets/tips.png" alt="护理小贴士" class="bounce" @click="showTipDialog" />
          <span style="font-size: 10px; color: #666; margin-top: 4px;">护理小贴士</span>
        </div>
<!--          <img src="../assets/tips.png" alt="护理小贴士" class="bounce" @click="showTipDialog"  style="margin-left: 16px; cursor: pointer;" />-->

      </el-form>

    <!-- 添加对话框 -->
  <el-dialog title="添加级别" v-model="addDialogVisible" width="300px">
    <el-form :model="addDialogData" label-width="80px">
      <el-form-item label="级别名称">
        <el-input v-model="addDialogData.careLevelName"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="addDialogData.careLevelStatus" placeholder="请选择">
          <el-option label="启用" value="true"></el-option>
          <el-option label="停用" value="false"></el-option>
        </el-select>
      </el-form-item>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddCareLevel">确 定</el-button>
      </div>
    </el-form>
  </el-dialog>



  <!-- 贴士对话框 -->
  <el-dialog title="🧼护理小贴士🧼" v-model="tipDialogVisible" width="1000px" style="text-align: center;">
    <div>
      <p style="text-align: center;"><strong>护理级别等级划分及描述：</strong></p>
      <p style="text-align: center;">1️⃣ <strong>一级护理（基础护理）</strong>：提供日常生活帮助，如洗澡、穿衣、进食等基础护理，适用于需要较少帮助的患者。🧑‍⚕️👵</p>
      <p style="text-align: center;">2️⃣ <strong>二级护理（专业护理）</strong>：包括健康监测、伤口护理、药物管理等，适用于慢性病患者或术后恢复的患者。💉🩺📊</p>
      <p style="text-align: center;">3️⃣ <strong>三级护理（重症护理）</strong>：对于生命体征不稳定的患者，提供24小时专门监护，包括机械通气等。⚠️💔🫁</p>
      <p style="text-align: center;">4️⃣ <strong>四级护理（临终护理）</strong>：为临终患者提供舒适护理，缓解痛苦并提供心理支持。🕊️💐🕯️</p>



      <p style="text-align: center;"><strong>护理级别的适用情景：</strong></p>
      <p style="text-align: center;"><strong>1️⃣ 基础护理</strong>：适用于自理能力较强的患者，如老人、轻度疾病患者、康复期患者，提供日常的生活帮助。👨‍⚕️👩‍🦳</p>
      <p style="text-align: center;"><strong>2️⃣ 专业护理</strong>：适用于有一定健康问题的患者，需定期健康检查、药物管理、伤口护理等。适合长期病患者或术后恢复期患者。💉🔬</p>
      <p style="text-align: center;"><strong>3️⃣ 重症护理</strong>：适用于生命体征不稳定、危重症患者。提供高强度的医疗监护和24小时照护，包含使用呼吸机、输液、注射等。⚠️🚑</p>
      <p style="text-align: center;"><strong>4️⃣ 临终护理</strong>：适用于晚期癌症患者等临终患者，专注于舒适护理和疼痛管理，以减轻病痛、提供尊严和心理支持。💐💔</p>



      <p style="text-align: center;"><strong>护理级别的服务项目：</strong></p>
      <p style="text-align: center;">🛏️ <strong>床旁护理</strong>：对于卧床患者，帮助其进行清洁、翻身、喂食、排泄等。🧼</p>
      <p style="text-align: center;">💉 <strong>药物管理</strong>：对于需要长期服药的患者，协助患者按时按量服药，并监控药效与副作用。💊</p>
      <p style="text-align: center;">🏥 <strong>术后恢复护理</strong>：包括伤口护理、拆线、肢体活动辅助等，帮助患者恢复手术后的身体功能。🩹</p>
      <p style="text-align: center;">💬 <strong>心理护理</strong>：提供情感支持与心理疏导，特别是临终患者的陪伴与支持，帮助减轻患者的孤独感。💚</p>



      <p style="text-align: center;"><strong>护理级别的意义：</strong></p>
      <p style="text-align: center;">护理级别的划分旨在根据患者的健康状况、护理需求、疾病类型等提供个性化的护理服务，从而保证患者在任何阶段都能得到适合的医疗和照护。🎯💡</p>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="tipDialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>





  <div class="flex-container">
      <!--护理级别列表-->
      <el-table :data="arr" stripe border @row-click="handleRowClick" highlight-current-row :current-row-key="selectedCareLevelId" class="flex-item">
        <el-table-column type="index" label="序号" width="110" />
        <el-table-column prop="careLevelName" label="护理级别" width="170"/>

        <el-table-column prop="careLevelStatus" label="使用状态" width="150">
          <template #default="{ row }">
            <!-- 使用条件渲染显示不同的标签 -->
            <el-tag
                :type="row.careLevelStatus ? 'success' : 'danger'"
                style="cursor: pointer;"
                @click="handleStatusChange(row)"
            >
              {{ row.careLevelStatus ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>


        <el-table-column label="操作" width="280">
          <template #default="{ row, rowIndex }">
            <el-button type="warning" size="small" @click="editCareLevel(row)">修改</el-button>
            <el-button type="primary" size="small" @click="configureCareItem(row)">护理项目配置</el-button>
          </template>
        </el-table-column>
      </el-table>



<!--        护理项目列表-->
        <el-table :data="careItems" stripe border class="flex-item" width = "500px">

          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="careItemCode" label="项目编号" />
          <el-table-column prop="careItemName" label="项目名称" />
          <el-table-column prop="careItemCycle" label="执行周期" />
          <el-table-column prop="careItemCount" label="执行次数" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button size="small" type="danger"@click="removeCareItem((row.careItemId))">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>



  <!-- 修改对话框 -->
  <el-dialog title="修改级别" v-model="editDialogVisible" width="300px">
    <el-form :model="editDialogData" label-width="80px">
      <el-form-item label="级别名称">
        <el-input v-model="editDialogData.careLevelName" disabled></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="editDialogData.careLevelStatus" placeholder="请选择">
          <el-option label="启用" value="true"></el-option>
          <el-option label="停用" value="false"></el-option>
        </el-select>
      </el-form-item>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditCareLevel">确 定</el-button>
      </div>
    </el-form>
  </el-dialog>


  <!-- 护理项目配置对话框 -->
  <el-dialog title="护理项目配置" v-model="careItemConfigDialogVisible" width="600px">
    <el-table
        :data="filteredActiveCareItems"
        stripe border
        highlight-current-row
        @selection-change="handleSelectionChange"
        style="align-items: center; gap: 16px; width: 100%; margin-bottom: 20px;"
        max-height="400px"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="careItemCode" label="项目编号" />
      <el-table-column prop="careItemName" label="项目名称" />
      <el-table-column prop="careItemCycle" label="执行周期" />
      <el-table-column prop="careItemCount" label="执行次数" width="100"/>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="careItemConfigDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitSelectedCareItems">确 定</el-button>
    </div>
  </el-dialog>

      <div class="flex-container">
      <!-- 护理级别列表分页 -->
      <div class="pagination-container" style="margin-top: 20px; display: flex; justify-content: left;">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="levelPagination.total"
            v-model:current-page="levelPagination.current"
            v-model:page-size="levelPagination.size"
            :page-sizes="[2, 10, 20, 50]"
            @current-change="handleLevelPageChange"
            @size-change="handleLevelSizeChange"
        />
      </div>

      <!-- 护理项目列表分页 -->
      <div class="pagination-container" style="margin-top: 20px; display: flex; justify-content: right;">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="levelItemPagination.total"
            v-model:current-page="levelItemPagination.current"
            v-model:page-size="levelItemPagination.size"
            :page-sizes="[1, 10, 20, 50]"
            @current-change="handleLevelItemPageChange"
            @size-change="handleLevelItemSizeChange"
        />
      </div>
      </div>

<!--    </el-main>-->
<!--  </el-container>-->
</template>

<script setup>
import { ref, inject, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'


// 级别列表分页功能
const levelPagination = reactive({ current: 1, size: 10, total: 0 })
function handleLevelPageChange(p) {
  levelPagination.current = p; init()
}
function handleLevelSizeChange(s) {
  levelPagination.size = s; levelPagination.current = 1; init()
}
// 分页后序号依旧按照总顺序排序（序号方法）
function indexMethod(index) {
  console.log(index)
  return (levelItemPagination.current - 1) * levelItemPagination.size + index + 1;
}


// 级别项目列表分页功能
const levelItemPagination = reactive({ current: 1, size: 10, total: 0 })
function handleLevelItemPageChange(p) {
  levelItemPagination.current = p; fetchCareItems(selectedCareLevelId.value)
}
function handleLevelItemSizeChange(s) {
  console.log(selectedCareLevelId)
  levelItemPagination.size = s; levelItemPagination.current = 1; fetchCareItems(selectedCareLevelId.value)
}



// 添加护理级别
const addDialogVisible = ref(false)   // 添加对话框是否显示
const addDialogData = reactive({     // 添加对话框单向绑定的数据对象
  careLevelName: '', // 级别名称
  careLevelStatus: '启用' // 状态
});
// 点击添加按钮所触发的事件
function addCareLevel() {
  addDialogVisible.value = true
  addDialogData.careLevelName = '';
  addDialogData.careLevelStatus = '启用'
}
// 在添加对话框点击“确定”按钮所触发的事件
async function submitAddCareLevel() {
  try {
    addDialogData.careLevelStatus = addDialogData.careLevelStatus == '启用'?true:editDialogData.careLevelStatus;
    console.log(addDialogData.careLevelName+addDialogData.careLevelStatus);
    const response = await axios.post('CareLevelController/addCareLevel', addDialogData);
    console.log(response);
    if (response) {
      ElMessage.success('添加成功');
      addDialogVisible.value = false;
    } else {
      ElMessage.error('添加失败：未返回有效数据');
    }
  } catch (error) {
    console.error('添加失败：', error);
    ElMessage.error('添加失败：' + (error.message || '未知错误'));
  }
  init();
}


// 等级小贴士
const tipDialogVisible = ref(false); // 控制小贴士对话框的显示与隐藏
// 显示小贴士对话框的函数
function showTipDialog() {
  tipDialogVisible.value = true;
}


// 编辑修改护理级别（状态）
const editDialogVisible = ref(false)
const editDialogData = reactive({     // 添加对话框单向绑定的数据对象
  careLevelId: 0,
  careLevelName: '', // 级别名称
  careLevelStatus: true // 状态
});
// 点击修改按钮所触发的事件
async function editCareLevel(row) {
  // 将当前行的数据复制到表单数据中
  editDialogData.careLevelId = row.careLevelId;
  editDialogData.careLevelName = row.careLevelName;
  editDialogData.careLevelStatus = row.careLevelStatus==true?'启用':'停用';
  editDialogVisible.value = true
}
// 在修改对话框点击“确定”按钮所触发的事件
async function submitEditCareLevel() {
  try {
    editDialogData.careLevelStatus = editDialogData.careLevelStatus == '启用'?true:editDialogData.careLevelStatus;
    editDialogData.careLevelStatus = editDialogData.careLevelStatus == '停用'?false:editDialogData.careLevelStatus;
    console.log(editDialogData.careLevelId+editDialogData.careLevelStatus);
    const response = await axios.post('CareLevelController/updateCareLevelStatus', editDialogData);
    console.log(response);
    if (response) {
      ElMessage.success('修改成功');
      editDialogVisible.value = false;
    } else {
      ElMessage.error('修改失败：未返回有效数据');
    }
  } catch (error) {
    console.error('修改失败：', error);
    ElMessage.error('修改失败：' + (error.message || '未知错误'));
  }
  init();
}



// 护理级别项目配置
// 护理项目配置对话框是否显示
const careItemConfigDialogVisible = ref(false);
// 激活的护理项目列表
const activeCareItems = ref([]);
const filteredActiveCareItems = ref([]);

// 点击“护理项目配置”按钮时触发的事件
async function configureCareItem(row) {
  try {
    // 获取激活的护理项目列表
    const url = 'CareItemController/listActiveCareItem';
    activeCareItems.value = await axios.get(url);
    console.log('Fetched active care items:', activeCareItems.value);
    const existingItemsUrl = `LevelItemController/levelItemNoPage?careLevelId=${row.careLevelId}`;

    const existingItemsResponse = await axios.get(existingItemsUrl);
    console.log("111"+existingItemsResponse)
    // 检查是否有已有的护理项目
    let existingItemIds = [];
    // if (existingItemsResponse.records && existingItemsResponse.records.length > 0) {
      existingItemIds = existingItemsResponse.map(item => item.careItemId);
      filteredActiveCareItems.value = activeCareItems.value.filter(item => !existingItemIds.includes(item.careItemId));
    // } else {
      // 如果没有已有的护理项目，直接使用激活的护理项目列表
      // filteredActiveCareItems.value = activeCareItems.value;
    // }
    // 显示护理项目配置对话框
    careItemConfigDialogVisible.value = true;
  } catch (error) {
    // console.error('获取激活的护理项目失败：', error);
    // ElMessage.error('获取激活的护理项目失败：' + (error.message || '未知错误'));
  }
}



// 处理选中的护理级别（显示选中护理级别下的护理项目）
const selectedCareLevelId = ref() // 默认选中第一行
function handleRowClick(row) {
  selectedCareLevelId.value = row.careLevelId
  console.log(row.careLevelId)
  fetchCareItems(row.careLevelId)
}



// 提交护理项目配置对话框中选中的护理项目
// 选中的护理项目列表
const selectedCareItems = ref([]);
// 处理护理项目选择变化的事件
function handleSelectionChange(selection) {
  selectedCareItems.value = selection;
}
// 提交选中的护理项目到后端
async function submitSelectedCareItems() {
  try {
    // 构造请求数据
    const requestData = selectedCareItems.value.map(item => ({
      careLevelId: selectedCareLevelId.value, // 当前选中的护理级别 ID
      careItemId: item.careItemId // 当前选中的护理项目 ID
    }));
    console.log(requestData);
    // 发送请求到后端
    const url = 'LevelItemController/addLevelItem';
    const responseData = await axios.post(url, requestData);
    // 检查返回的数据
    if (responseData) {
      // 添加成功
      ElMessage.success('添加成功');
      // 关闭护理项目配置对话框
      careItemConfigDialogVisible.value = false;
      // 刷新护理项目列表
      fetchCareItems(selectedCareLevelId.value);
    } else {
      // 添加失败
      ElMessage.error('添加失败：未返回有效数据');
    }
  } catch (error) {
    // 捕获错误
    console.error('提交选中的护理项目时发生错误：', error);
    ElMessage.error('添加失败：' + (error.message || '未知错误'));
  }
}



// 移除级别下的护理项目
async function removeCareItem(careItemId) {
  try {
    // 确认是否移除
    await ElMessageBox.confirm('确认移除该护理项目？', '提示', { type: 'warning' });
    // 构造请求数据
    const requestData = {
      careLevelId: selectedCareLevelId.value, // 当前选中的护理级别 ID
      careItemId: careItemId // 当前点击的护理项目编号
    };
    console.log(requestData);
    // 发送请求到后端
    const url = 'LevelItemController/deleteLevelItem';
    const responseData = await axios.post(url, requestData);
    // 检查返回的数据
    if (responseData) {
      // 移除成功
      ElMessage.success('移除成功');
      // 刷新护理项目列表
      fetchCareItems(selectedCareLevelId.value);
    } else {
      // 移除失败
      ElMessage.error('移除失败：未返回有效数据');
    }
  } catch (error) {
    // 捕获错误
    console.error('移除护理项目时发生错误：', error);
    ElMessage.error('移除失败：' + (error.message || '未知错误'));
  }
}


// 初始化护理级别列表
// 引入全局注入的 axios 对象
const axios = inject('axios')
const filters = reactive({ careLevelName: '', careLevelStatus: '1' }) // 默认显示启用状态的护理级别
let arr = ref([])
const init = async () => {
  console.log(levelPagination.size)
  console.log(levelPagination.current)
  let url = `CareLevelController/listCareLevelByStatus?careLevelStatus=${filters.careLevelStatus}&page=${levelPagination.current}&size=${levelPagination.size}`;
  try {
    const data = await axios.get(url);
    arr.value = data.records
    levelPagination.total = data.total
    if (arr.value.length > 0) {
      selectedCareLevelId.value = arr.value[0].careLevelId
    }
    console.log('chongg', arr.value) // 打印查看数据
    fetchCareItems(selectedCareLevelId.value) // 默认获取第一行的护理项目
  } catch (error) {
    console.log(error)
    ElMessage.error(error.message || '获取数据失败')
  }
}
// 调用初始化函数，在页面载入前把数据从后台拉取到前端
onMounted(init)



// 根据护理级别显示护理项目列表
const careItems = ref([])
async function fetchCareItems(careLevelId) {
  try {
    console.log(levelItemPagination.size)
    console.log(levelItemPagination.current)
    let url = `LevelItemController/levelItem`
    let params = {
      careLevelId: careLevelId,
      page: levelItemPagination.current,
      size: levelItemPagination.size
    };
    const data = await axios.get(url, {
      params: params
    });
    careItems.value = data.records
    levelItemPagination.total = data.total
    console.log('Fetched care items:', careItems.value)

    if (data.records.length === 0) {
      console.log('No care items found for the selected care level.');
      // 可选：显示一个友好的提示信息
      // ElMessage.info('没有找到对应的护理项目。');
    }
  } catch (error) {
    careItems.value = []
    // console.log(error)
    // ElMessage.error(error.message || '获取护理项目失败')
  }
}



// 处理状态改变（根据护理级别状态进行筛选）
function handleStatusChange(value) {
  console.log('Selected status:', value)
  init()
}

</script>

<style scoped>
.careLevel-select {
  width: 150px; /* 设置宽度 */

}
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bounce {
  width: 50px;
  animation: bounce 1.5s infinite;
}
.custom-form .el-form-item{
  margin-top: 25px;
  margin-bottom: 30px
}
.el-upload__tip{
  line-height: 1;
  color: red;
}

.dialog-section {
  border-bottom: 1px solid #eaeaea;
  padding: 10px 0;
}
.dialog-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
.client-name {
  flex: 1;
}
.client-cover {
  flex: 1;
  text-align: center;
}
.cover-frame {
  display: inline-block;
  border: 1px dashed #ccc;
  padding: 5px;
  width: 150px;
  height: 150px;
}
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-item {
  flex: 1;
  margin-right: 16px;
}
.flex-item:last-child {
  margin-right: 0;
}

.dialog-footer {
  display: flex;
  justify-content: center; /* 将按钮居中对齐 */
  gap: 16px;  /* 按钮之间的间距 */
}

.el-table th, .el-table td {
  text-align: center; /* 表头和表格内容居中 */
}
</style>